<template>
  <div class="unfinish">
    <h1><p>正在进行</p> <span>{{getUnFinish.length}}</span></h1>
    <ul>
      <li v-for="v in getUnFinish" :key="v.id">
        <p><input type="checkbox" @change="change($event,v.id)">{{v.msg}}</p> 
   <van-button type="warning" @click="del(v.id)">删除</van-button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Unfinish',
  data () {
    return {
      msg: ''
    }
  },
  methods:{
    change(e,id){
     
      var  obj = {
        check:e.target.checked,
        id:id
      }
      this.$store.commit("change",obj);
    },
    // 删除
    del(id){
        this.$store.commit("del",id);
    }
  },
  computed:{
    getUnFinish(){
      return this.$store.getters.getUnFinish;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.unfinish h1{
  display: flex;
  justify-content: space-between;
}
.unfinish p{
  font-size: 24px;
}
ul li{
  display: flex;
  justify-content: space-between;
  background: whitesmoke;
  padding: 3px 5px ;
  margin-top: 5px;
}
</style>
